<template>
	<div class="wrap" v-loading="loading" element-loading-text="等下,我正在请求" element-loading-spinner="el-icon-loading">
		<basic-opt :has_left="true">
			<template #search>
				<div class="opt-item">
					<el-input class="w-ipt" placeholder="请输入姓名进行筛选" suffix-icon="el-icon-search" v-model="search.name"
						@keydown.enter="getSearchData" size="medium">
					</el-input>
				</div>
				<div class="opt-item">
					<el-input class="w-ipt" placeholder="请输入地址进行筛选" suffix-icon="el-icon-search"
						v-model="search.address" @keydown.enter="getSearchData" size="medium">
					</el-input>
				</div>
				<div class="opt-item">
					<el-button @click="getSearchData" size="medium">搜索</el-button>
				</div>
				<div class="opt-item">
					<reset-search></reset-search>
				</div>
			</template>
		</basic-opt>

		<div class="table-box">
			<el-table :data="data" stripe :header-cell-style="header_cell_style" :max-height="table_max_height">
				<el-table-column prop="id" label="ID" width="150px"></el-table-column>
				<el-table-column prop="name" label="姓名" width="200px"></el-table-column>
				<el-table-column prop="address.address" label="地址"></el-table-column>
				<el-table-column prop="type" label="类型" width="200px"></el-table-column>
				<el-table-column prop="time" label="时间" width="200px" :formatter="formatTime"></el-table-column>
				<el-table-column prop="result" label="结果"></el-table-column>
			</el-table>
		</div>
		<page-component @pageChanged="onPageChanged"></page-component>
	</div>

  <!--  mobile  -->
  <div class="mobile-wrap" v-loading="loading" element-loading-text="等下,我正在请求" element-loading-spinner="el-icon-loading">
    <div class="mobile-search-vertical">
      <el-input class="w-ipt" placeholder="请输入姓名进行筛选" suffix-icon="el-icon-search" v-model="search.name"
                @keydown.enter="getSearchData" size="medium">
      </el-input>
      <el-input class="w-ipt" placeholder="请输入地址进行筛选" suffix-icon="el-icon-search"
                v-model="search.address" @keydown.enter="getSearchData" size="medium">
      </el-input>
      <el-button @click="getSearchData" size="medium">搜索</el-button>
    </div>
    <div class="moblie-table-box">
      <el-table :data="data" stripe :header-cell-style="header_cell_style" :max-height="mobile_table_max_height">
        <el-table-column prop="id" label="ID" width="150px"></el-table-column>
        <el-table-column prop="name" label="姓名" width="100px"></el-table-column>
        <el-table-column prop="address.address" label="地址" width="200"></el-table-column>
        <el-table-column prop="type" label="类型" width="100px"></el-table-column>
        <el-table-column prop="time" label="时间" width="200px" :formatter="formatTime"></el-table-column>
        <el-table-column prop="result" label="结果" width="300"></el-table-column>
      </el-table>
    </div>
    <page-component @pageChanged="onPageChanged"></page-component>
  </div>
</template>

<script>
	import API from '@/api/index.js'
	import mixin from '@/mixin.js'
	import DATE from '@/utils/date.js'

	export default {
		name: 'pushLogs',
		mixins: [mixin],
		data() {
			return {
				search: {
					name: '',
					address: ''
				}
			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			async getData() {
				let self = this;
				self.loading = true;
				try {
					let params = {
						name: self.search.name ? self.search.name : '',
						address: self.search.address ? self.search.address : ''
					}
					self.addPageInfo(params)
					let res = await API.pushRecords(params.pageNumber, params.pageSize, params.name, params.address)
					self.loading = false;
					self.onGotPageData(res)
				} catch (err) {
					self.loading = false;
				}
			},
			
			// 格式化表格时间戳
			formatTime(row) {
				return DATE.formatTime(row.time, 'Y-M-D h:m:s')
			}
		},
	}
</script>
